<template>
  <view class="notice">
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="container">
        <view
          v-for="item in listData"
          :key="item.id"
          class="l-border-bottom"
          @click="
            $route({
              url: '/pages/settings/noticeDetails/index',
              params: { id: item.id },
            })
          "
        >
          <Cell cellClass="cell-classs">
            <template slot="title">
              <view class="l-ellipsis title">{{ item.noticeTitle }}</view>
            </template>
            <template slot="content">
              <view class="content">{{ item.createTime }}</view>
            </template>
            <template slot="icon">
              <u-icon name="arrow-right"></u-icon>
            </template>
          </Cell>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from "@/components/Mescroll/mixin.js";
import Cell from "@/components/Cell";
import { noticeList } from "@/api";
export default {
  mixins: [MescrollMixin],
  components: {
    Cell,
  },
  data() {
    return {
      listData: [],
    };
  },
  onShow() {
    if (this.listData.length) {
      this.mescroll.resetUpScroll();
    }
  },
  methods: {
    tabChange(val) {
      this.orderStatus = val.value;
      this.mescroll.resetUpScroll();
    },
    upCallback(mescroll) {
      let params = {
        pageSize: mescroll.size,
        pageNum: mescroll.num,
      };
      if (mescroll.num == 1) this.listData = [];
      noticeList(params).then((res) => {
        this.listData = this.listData.concat(res.rows);
        mescroll.endBySize(res.rows.length, res.total);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  margin: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.title {
  width: 414rpx;
  margin-bottom: 12rpx;
  font-size: 30rpx;
  color: #000000;
}
.content {
  color: #666666;
  font-size: 28rpx;
}
</style>
